<template>
 <div>
    <div class="mb-2">
        <el-input
           v-model="comment.comContent"
           :autosize="{ minRows: 2,maxRows: 5 }"
           type="textarea"
           placeholder="请输入评论"
        />
        <el-button @click="addComment">回复</el-button>
    </div>
    <el-card
       v-for="(comment,index) in comments"
       :key="comment.noteCommentId"
       class="mb-2"
    >
      <el-row class="mb-1">
          <el-col :span="24">
              <img :src="comment.headUrl" style="height: 3rem;width: 3rem" />
          </el-col>
      </el-row>
      <el-row class="mb-1">
          <el-col :span="24">{{ comment.comContent }}</el-col>
      </el-row>
      <el-row class="mb-1">
          <el-col :span="24">{{ index + 1 }} 楼 {{ comment.comTime }}</el-col>
      </el-row>
    </el-card>
 </div>
</template>

<script>
export default {
    name:"NoteComment",
    props:{
        noteInfoId: Number,
    },
    data() {
        return{
            //用于加载评论列表
        comments: [],
        //用于提交评论的内容所需的参数
        comment: {
            comContent:null,
            noteInfoId:this.noteInfoId,
            replyAuthorId:0
        },
        };
    },
    mounted() {
        this.getComments;
    },
    methods:{
        //获取评论的列表
        getComments() {
            this.$axios
            .get("/api/note/detail/comment?noteId=" + this.noteInfoId)
            .then((response) => {
                let data = response.data;
                if (data.code == 200) {
                    this.comments = data.data;
                }
            });
    },

    //回复评论
    addComment() {
        this.$axios.post('/api/note/detail/comment/add',this.comment)
        .then(response=>{
            let data = response.data
            alert(data.msg)
            if(data.code==200){
                this.getComments();
            }else if(data.code==403){
                this.$router.push("/login")
            }
        })
    }
    },

};
</script>

<style>
</style>